<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>容器资源使用统计</title>
    <meta name="viewport" content="width=device-width, initial-scale=0.75, maximum-scale=1.0, user-scalable=yes, user-scalable=0, minimal-ui">
    <link rel="stylesheet" type="text/css" href="../../js/layer/css/layui.css">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="refresh" content="300">
    <script type="text/javascript" src="../../js/echarts.js"></script>
    <script type="text/javascript" src="../../js/layer/layui.js"></script>
    <script>
        window.MAIN_DATE = "";
    </script>
</head>
<body style="padding-left: 20px; padding-right: 20px;">
<div id="view">

    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">
                <select autocomplete="off" id="dates" onchange="onchangedate(this)" class="layui-input" style="width: 162px; border-style:none!important;">
                    {{#  arr_foreach(d.dates, function(index, item){ }}
                    {{#  if(item == MAIN_DATE){ }}
                    <option value="{{item}}" selected>{{item}}内存使用情况</option>
                    {{# }else{ }}
                    <option value="{{item}}">{{item}}内存使用情况</option>
                    {{#  } }}
                    {{#  }); }}
                </select>
            </li>
        </ul>
    </div>
    <div id="ram_use" style="width: 100%;height:450px;"></div>


    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">{{MAIN_DATE}}CPU使用率</li>
        </ul>
    </div>
    <div id="cpu_use" style="width: 100%;height:450px;"></div>


    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">{{MAIN_DATE}}网络使用情况</li>
        </ul>
    </div>
    <div id="network_use" style="width: 100%;height:450px;"></div>

</div>

<script>
    ready(function() {
        layui.use(['zhanshop'], function () {
            var zhanshop = layui.zhanshop;
            var $ = layui.$;
            var dateStr = zhanshop.getParam("date");
            if(dateStr == "" || dateStr == false || dateStr == {}){
                // 获取当前日期
                var today = new Date();
                // 获取昨天的日期
                var yesterday = new Date(today);
                yesterday.setDate(today.getDate());

                // 格式化日期输出
                var yy = yesterday.getFullYear();
                var mm = (yesterday.getMonth() + 1).toString().padStart(2, '0')
                var dd = yesterday.getDate().toString().padStart(2, '0')
                dateStr = yy+''+mm+''+dd;
            }
            MAIN_DATE = dateStr;
            $('#dates').val(dateStr);
            zhanshop.view(API_ADDRESS + apiUrlTable +"/"+ parent.zhanshop.getParam('_id')+"?date="+dateStr, '#view', function (data) {
                var ramUseOption = {
                    xAxis: {
                        data: data.data.ram.time,
                    },
                    yAxis: {},
                    grid: {
                        top: 50,
                        left: 150,
                        right: 30,
                        height: 300
                    },
                    series: [
                        {
                            data: data.data.ram.val,
                            type: 'line',
                            areaStyle: {
                                color: '#16baaa'
                            }
                        }
                    ]
                };

                var ramUseChart = echarts.init(document.getElementById('ram_use'));
                ramUseChart.setOption(ramUseOption);

                var cpuUseOption = {
                    xAxis: {
                        data: data.data.cpu.time
                    },
                    yAxis: {},
                    grid: {
                        top: 50,
                        left: 150,
                        right: 30,
                        height: 300
                    },
                    series: [
                        {
                            data: data.data.cpu.val,
                            type: 'line',
                            areaStyle: {
                                color: '#a233c6'
                            }
                        }
                    ]
                };
                var cpuUseChart = echarts.init(document.getElementById('cpu_use'));
                cpuUseChart.setOption(cpuUseOption);


                var networkUseOption = {
                    xAxis: {
                        data: data.data.network.time
                    },
                    yAxis: {},
                    grid: {
                        top: 50,
                        left: 150,
                        right: 30,
                        height: 300
                    },
                    series: [
                        {
                            data: data.data.network.val,
                            type: 'line',
                            areaStyle: {
                                color: '#000000'
                            }
                        }
                    ]
                };
                var networkUseChart = echarts.init(document.getElementById('network_use'));
                networkUseChart.setOption(networkUseOption);

            }, "POST", {"_method":"stats", "id": zhanshop.getParam('id')});

            window.onchangedate = function (obj){
                window.location = window.location.pathname+"?id="+zhanshop.getParam('id')+"&date="+obj.value
            }
        });
    });

</script>
</body>
</html>